<script setup>
import {updateApi} from "@/api/RoomAPI";
import MyForm from "@/components/MyForm.vue";
import {shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";

let room = JSON.parse(sessionStorage.getItem('room'));

// 表单数据 + 表单规则
let items = shallowRef([
  {'label': '房间名称', 'prop': 'title'},
  {'label': '房间容量', 'prop': 'capacity', 'type': 'number'},
  {'label': '房间地址', 'prop': 'address', 'type': 'textarea'},
  {'label': '房间描述', 'prop': 'info', 'type': 'textarea'},
]);
let data = shallowReactive({
  'id': room['id'],
  'title': room['title'],
  'capacity': room['capacity'],
  'address': room['address'],
  'info': room['info'],
});
let rules = {
  'info': RULE.COMMON_INFO,
  'title': RULE.COMM_TITLE,
  'address': RULE.COMMON_INFO,
};

function success() {
  setTimeout(() => router.push('/Room'), 1000);
}

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '员工管理'},
    {'icon': 'User', 'label': '房间列表', 'url': '/Room'},
    {'icon': 'User', 'label': '修改房间'},
  ]"/>

  <div class="room-insert-body">
    <my-form type="update" width="65%"
             :span="1"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="success"
    />
  </div>

</template>

<style scoped lang="scss">

.room-insert-body {
  margin-top: 50px;
}

</style>